<template>
	<view class="wenchuang">
		<!--头部商品swiper-->
		<view class="head-swiper">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<block v-for="(item,index) in head_list" :key="index">
					<swiper-item>
						<view class="swiper-item" @click="handleGoods(item)">
							<image :src="item.imgUrl"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!--魅力非遗-->
		<view class="video-list">
			<view class="head">
				<view class="title">
					<text>魅力非遗</text>
				</view>
				<view class="more" @click="handleGoMoreDetail('1')">
					<text>查看更多</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="huodong-info">
				<view class="huodong-video">
					<yy-video-player style="width: 100%;" :id="'video'" :auto-play="videoInfo.isPlay" :url="videoInfo.source" :poster="videoInfo.listImage"
					 :show-back-btn="false" :show-download-btn="false" v-show="videoInfo.isPlay" :danmuList="danmu" @ended="endPlayVideo(videoInfo)"></yy-video-player>

					<view class='myCover' v-if="!videoInfo.isPlay">
						<view class='myCoverCon'>
							<image class='myCoverImg' :src="videoInfo.listImage"></image>
							<view class="myPalyButton">
								<image @click="playTheVideo(videoInfo)" src="../../static/img/play.png"></image>
							</view>
							<view class="myPlaytitle">
								<text>{{videoInfo.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--编辑精选-->
		<view class="bianji-select">
			<view class="head">
				<view class="title">
					<text>编辑精选</text>
				</view>
				<view class="more" @click="changeList()">
					<text>换一批</text>
					<text style="font-size: 30upx;" class="iconfont icon-shuaxin"></text>
				</view>
			</view>
			<view class="goods-list">
				<view class="goods-info">
					<block v-if="index < 3" v-for="(item,index) in goods_list" :key='index'>
						<view class="goods-item" @click="handleGoods(item)">
							<view class="goods-img">
								<image :src='item.listImage'></image>
							</view>
							<view class="goods-desc">
								<view class="goods-name">
									<text>{{item.title}}</text>
								</view>
								<view class="goods-price">
									<text>{{item.marketPrice}}</text>
									<text>元</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!--走进文创-->
		<view class="wenchuang-list">
			<view class="head">
				<view class="title">
					<text>走进文创</text>
				</view>
				<view class="more" @click="handleGoMoreDetail('2')">
					<text>查看更多</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="list-info">
				<block v-for="(item,index) in wenchuang_list" :key="index">
					<view class="list-item" @click="handleGoNewsDetail(item)">
						<image :src="item.listImage"></image>
						<text>{{item.title}}</text>
					</view>
				</block>
			</view>
		</view>
		<!--更多商品-->
		<view class="goods-more">
			<view class="head">
				<view class="title">
					<text>更多商品</text>
				</view>
				<view class="more">
					<!-- 	<text>查看更多</text>
					<text class="iconfont icon-right"></text> -->
				</view>
			</view>
			<view class="more-list">
				<block v-for="(item,index) in goods_more" :key="index">
					<view class="more-item" @click="handleGoods(item)">
						<view class="more-image">
							<image :src="item.listImage"></image>
						</view>
						<view class="more-desc">
							<view class="more-name">
								<text>{{item.title}}</text>
							</view>
							<view class="more-price">
								<text>¥</text>
								<text>{{item.marketPrice}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- <view style="margin-bottom:40upx;">
				<wxc-flex v-if='isNoMore' dir='left' main='center' cross='center' style='width:100%;margin-top:40upx;margin-bottom:40upx;'>
					<！--<vline color='#DDDDDD' style="width:120upx; height:1upx;background: #DDDDDD;"></vline> -->
			<!-- <text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text> -->
			<!-- <vline color='#DDDDDD' style="width:120upx; height:1upx;background: #DDDDDD;"></vline> -->
			<!-- </wxc-flex> -->
			<!-- </view> -->
		</view>
		<footLogo></footLogo>
	</view>
</template>

<script>
	var currentPage = 1
	import wxcFlex from "@/components/custom/flex.vue"
	import footLogo from "@/components/foot-logo/footLogo.vue"
	import yyVideoPlayer from '@/components/yy-video-player/yy-video-player.nvue';
	export default {
		components: {
			footLogo,
			wxcFlex,
			yyVideoPlayer
		},
		data() {
			return {
				head_list: [],
				videoInfo: {},
				goods_list: [],
				wenchuang_list: [],
				goods_more: [],
				isNoMore: false,
				danmu: []

			};
		},
		onLoad: function(option) {
			this.getHeadList()
			this.getVideoInfo()
			this.getGoodsList('甘肃文创-编辑精选')
			this.getWenChList()
			this.getGoodsList('')
		},
		onReachBottom: function() {
			console.log("this.isNoMore", this.isNoMore)
			if (!this.isNoMore) {
				this.getGoodsList('')
			}
		},
		onReady: function() {
			// this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			getHeadList: function() {
				let params = {
					channelType: this.pub.channelType,
					pageIndex: '1',
					attribute: '甘肃文创-轮播推荐',
					locationType: '11' //11为文创
				}
				this.$postApi(this.$path.BANNER_LIST, params).then(res => {
					console.log("头部swiper商品返回数据---------->", res.data)
					if (res.data.success) {
						this.head_list = res.data.data.list
					} else {
						this.head_list = []
					}
				})
			},

			getVideoInfo: function() {
				let params = {
					channelType: this.pub.channelType,
					attribute: '甘肃文创-魅力非遗'
				}
				this.$postApi(this.$path.NEWS_LIST, params).then(res => {
					console.log("视频资讯返回数据---------------->", res.data)
					if (res.data.success) {
						res.data.data.list[0].isPlay = false
						this.videoInfo = res.data.data.list[0]
					} else {
						this.pub.showError(res.data.error.errorMessage)
					}
				})
			},
			playTheVideo: function(e) {
				// console.log("------------------------", e)
				let temp = e;
				temp.isPlay = true;
				this.videoInfo = temp
				// setTimeout(() => {
				let videoContext = uni.createVideoContext('video', this);
				videoContext.play();
				// }, 500)
				console.log("this.videoInfo>", this.videoInfo);
			},

			endPlayVideo: function(e) {
				let item = e;
				item.isPlay = false;
				this.videoInfo = item;
				let videoContext = uni.createVideoContext('video', this)
				videoContext.exitFullScreen();
			},
			getGoodsList: function(attribute) {
				let params = {
					channelType: this.pub.channelType,
					attribute: attribute,
					typeCode: "200003005",
					pageIndex: currentPage,
					pageSize: '6'
				}
				this.$postApi(this.$path.GET_NEW_COMMODITY_LIST, params).then(res => {
					console.log("编辑精选商品返回数据------------>", res.data)
					if (res.data.success) {
						let list = res.data.data.list
						if (attribute) {
							this.goods_list = list
						} else {
							if (currentPage == 1) {
								var content = list
							} else {
								var content = this.goods_more.concat(list)
							}

							var isNoMore = false
							var isEmpty = false

							if (content.length == 0) {
								isEmpty = true;
								isNoMore = false;
								console.log("content=0")
							} else if (!res.data.data.hasNextPage) {
								console.log("hasNextPage = false")
								//已经无再多数据
								isNoMore = true;
								isEmpty = false;
							}
							currentPage++;
							this.isNoMore = isNoMore;
							this.isEmpty = isEmpty;
							this.goods_more = content
						}

					} else {

					}
				})
			},
			getWenChList: function() {
				let params = {
					channelType: this.pub.channelType,
					attribute: '甘肃文创-走进文创'
				}
				this.$postApi(this.$path.NEWS_LIST, params).then(res => {
					console.log("走进文创返回数据----------->", res.data)
					if (res.data.success) {
						this.wenchuang_list = res.data.data.list
					} else {

					}
				})
			},
			handleGoods: function(item, title) {
				let id = item.jumpLink ? item.jumpLink : item.id
				uni.navigateTo({
					url: '/pages/shopping_new/shoppingdetail?id=' + id,
					animationType: 'pop-in',
					animationDuration: 200
				});
				// switch(item.jumpType){
				// 	//11为文创跳转
				// 	case '11':

				// 	break
				// }
			},
			handleGoNewsDetail: function(item) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/travelDetail/travelDetail?id=' + id + '&pages=news',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			handleGoMoreDetail: function(type) {
				switch (type) {
					//魅力非遗
					case '1':
						uni.navigateTo({
							url: '/pages/videolist/videolist',
							animationType: 'pop-in',
							animationDuration: 200
						})
						break
						//走进文创
					case '2':
						uni.navigateTo({
							url: '/pages/wclist/wclist',
							animationType: 'pop-in',
							animationDuration: 200
						})
						break
					case '3':
						break
				}
			},
			changeList: function() {
				this.goods_list = this.getRandomArrayElements(this.goods_list, 3)
			},
			getRandomArrayElements: function(arr, count) {
				var shuffled = arr.slice(0),
					i = arr.length,
					min = i - count,
					temp, index;
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random());
					temp = shuffled[index];
					shuffled[index] = shuffled[i];
					shuffled[i] = temp;
				}
				return shuffled.slice(min);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wenchuang {
		padding: 0;
		margin: 0;
		font-size: 34upx;
		// padding-bottom: 100upx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.head-swiper {
		height: 600upx;

		.swiper {
			height: 600upx;
		}

		.swiper-item {
			height: 600upx;
		}
	}

	.head {
		display: flex;
		justify-content: space-between;

		// padding: 25upx;
		.title {
			font-size: 38upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(46, 46, 46, 1);
			display: flex;
			align-items: center;
		}

		.more {
			font-size: 27upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 40px;
		}
	}

	.video-list {
		padding: 20upx 20upx 40upx 20upx;
	}

	.huodong-info {
		position: relative;
		display: inline-block;
		/*position: relative;*/
		width: 100%;
		/*height: 400rpx;*/
		// margin-left: 23rpx;
		flex-direction: column;
		box-shadow: #f2f2f2 0px 0px 10px;
		/* box-shadow:black 0px 0px 10px; */
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		/* border: red 1px solid; */
	}

	.huodong-img,
	.huodong-video {
		width: 100%;
		height: 396upx;
		/*position: relative;*/
		/* border: orange 2px solid; */
	}

	.myVideoCon {
		margin-top: 15upx;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 396upx;
		padding-top: 40upx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.myVideo {
		width: 100%;
		height: 396upx;

	}

	.myCover {
		width: 100%;
		height: 396upx;
		background-color: #fff;
		/*position: absolute;*/
		/*top: 40rpx;*/
		/*left: 0;*/
	}

	.myCoverCon {
		width: 100%;
		height: 396upx;
		position: relative;
		/*display: flex;*/
		/*justify-content: center;*/
		/*align-items: center;*/
		/*background-color: #fff;*/
		/*position: absolute;*/
		/*top: 0;*/
		/*left: 0;*/
	}

	.myCoverImg {
		width: 100%;
		height: 396rpx;
		border-radius: 20rpx;
		/*position: absolute;*/
		/*top: 0;*/
		/*left: 0;*/
	}

	.myPalyButton {
		width: 130upx;
		height: 130upx;
		position: absolute;
		/* top: 105rpx; */
		bottom: 40%;
		left: 43%;
		z-index: 200;
		margin-bottom: 40upx;
	}

	.myPlaytitle {
		position: absolute;
		z-index: 200;
		bottom: 10%;
		left: 10%;
		width: 80%;
		// width:632px;
		height: 89upx;
		background: rgba(255, 255, 255, 1);
		opacity: 0.76;
		border-radius: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(26, 26, 26, 1);
		line-height: 51upx;

	}

	.bianji-select {
		// height: 400upx;
		padding: 20upx;
	}

	.goods-list {
		// height: 600upx;
	}

	.goods-info {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods-item {
		width: 31.5%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 7upx 27upx 0px rgba(0, 0, 0, 0.11);
		opacity: 1;
		border-radius: 20upx;
		// height: 300upx;
	}

	.goods-img {
		height: 200upx;
	}

	.goods-img image {
		border-radius: 20upx 20upx 0 0;
	}

	.goods-desc {

		padding: 18upx 32upx 18upx 32upx;
		text-align: center;

		.goods-name {
			margin-bottom: 20upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(46, 46, 46, 1);
		}

		.goods-price {
			font-size: 33upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 94, 4, 1);

		}

		.goods-price text:last-child {
			font-size: 20upx;
		}

	}

	.wenchuang-list {
		padding: 20upx;

		.list-item {
			height: 192upx;
			border-radius: 20upx;
			margin-top: 19upx;
			position: relative;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.list-item image {
			border-radius: 20upx;

		}

		.list-item text {
			position: absolute;
			bottom: 29upx;
			// width: 600upx;
			left: 37upx;
			font-size: 34upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			line-height: 51upx;
			text-shadow: 0upx 3upx 5upx rgba(86, 51, 26, 0.57);

		}
	}

	.goods-more {
		padding: 20upx;

		.more-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.more-item {
			width: 49%;
			box-shadow: 0px 7px 27px 0px rgba(0, 0, 0, 0.11);
			// opacity:0.58;
			border-radius: 20upx;
			margin-top: 14upx;

			// height: 300upx;
			.more-image {
				height: 300upx;
				border-radius: 20upx 20upx 0 0;
			}

			.more-image image {
				border-radius: 20upx 20upx 0 0;
			}

			.more-desc {
				padding: 16upx;

				.more-name {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(26, 26, 26, 1);
					line-height: 45upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.more-price {
					margin-top: 14upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF5E04;
					line-height: 45upx;
				}

				.more-price text:last-child {
					font-size: 38upx;
				}
			}
		}
	}
</style>
